<template>
    <view>
        <!-- pages/chuzhika/chuzhika.wxml -->
        <view class="dhl"><!-- 导航栏 --></view>

        <view class="page">
            <view class="hy_kq">
                <!-- 卡  for -->
                <navigator  class="hy_kq_kk" :url="'/packageB/chognzhi/chognzhi?index=0'">
                    <view class="hy_kq_1">
                        <view class="hy_kq_text">{{ rechargCard.title }}</view>
                        <view class="hy_kq_tpq">
                          ￥{{rechargCard.money}}
<!--                          <image class="hy_kq_tp" src="/static/pages/img/充值跳转标.png"></image>-->
                        </view>
                    </view>
                    <view class="hy_kq_kx">充值卡</view>
                    <view class="hy_kq_di">
                        <view>使用规则：同比例扣除</view>
                        <view>有效期限：不限期</view>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
// pages/chuzhika/chuzhika.js
import {userrechargCard} from '../../common/api';
export default {
    data() {
        return {
          rechargCard:{}
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {

    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      userrechargCard(res=>{
        this.setData({
          rechargCard:res.data.data
        });
        console.log('userrechargCard',res)
      })
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
.page {
    background-color: rgb(247, 247, 247);
    height: 100vh;
    padding: 60rpx 40rpx 60rpx 40rpx;
}

.hy_kq_kk {
    background-color: rgb(194, 162, 104);
    height: 200rpx;
    border-radius: 12rpx; /* 设置边框圆角 */
    padding: 30rpx 30rpx 30rpx 30rpx;
    color: rgb(121, 68, 19);
}
.hy_kq_1 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
}
.hy_kq_text {
    font-weight: bold; /* 设置字体加粗 */
    font-size: 20px; /* 将字体大小设为14px */
}
.hy_kq_tp {
    width: 30rpx;
    height: 30rpx;
}
.hy_kq_tpq {
  font-size: 25rpx;
//border-radius: 50%;
  color: rgb(121, 68, 19);
//background-color: rgba(212, 192, 153, 0.5);
}
.hy_kq_kx {
    margin-top: 40rpx;
}

.hy_kq_di {
    margin-top: 40rpx;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
    font-size: 11px; /* 将字体大小设为14px */
}
</style>
